import { teamsLightTheme } from "fish-ui-yy";
import type { BorderRadiusTokens } from "fish-ui-yy";

const theme = teamsLightTheme;

export const BorderRadius = () => {
    const borderTokens = Object.keys(theme).filter((tokenName)=>{
        return tokenName.startsWith("borderRadius")
    }) as (keyof BorderRadiusTokens)[]
    console.log(borderTokens)
  return (
    <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(3, auto) 1fr",
        gap: "10px 20px",
        alignItems: "center",
      }}>
        {
            borderTokens.map((radius)=>[
                <div key={radius}>{radius}</div>,
                <div key={`${radius}-value`} style={{textAlign:"center"}}>{theme[radius]}</div>,
                <div key={`${radius}-1`} style={{
                    backgroundColor:"#bbb",
                    width:"3em",
                    height:"3em",
                    borderRadius:theme[radius]
                }}></div>,
                <div key={`${radius}-2`} style={{
                    border: `${theme.strokeWidthThin} solid black`,
                    width: "3em",
                    height: "3em",
                    borderRadius: theme[radius],
                  }}></div>
            ])
        }
   </div> 
  )
};

export default {
  title: "theme/BorderRadius",
  parameters: {
    docs: {
      canvas: {
        sourceState: "none",
        withToolbar: false,
      },
    },
  },
};